<template>
  <div class="sourceTrend">
    <div class="areaBox">
      <div class="text">{{ sourceData.name }}来源数据展示</div>
      <div class="btns">
        <el-button @click="source_back" type="primary" plain>返回</el-button>
      </div>
    </div>
    <el-tabs v-model="sysRemark" @tab-click="handleClick">
        <el-tab-pane label="01_省计费平台出账" name="01_省计费平台出账"></el-tab-pane>
        <el-tab-pane label="02_省公司人工收入" name="02_省公司人工收入"></el-tab-pane>
        <el-tab-pane label="03_分公司人工收入" name="03_分公司人工收入"></el-tab-pane>
        <el-tab-pane label="来源表格图" name="来源表格图"></el-tab-pane>
    </el-tabs>
    <el-table
        v-if="sysRemark == '来源表格图'"
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        border
        stripe
        >
        <el-table-column
            v-for="(item,index) in tableTitle" :key="index"
            align="center"
            :label="item"
            :prop="'data' + index"
            :width="index==0?'174px':''"
        ></el-table-column>
    </el-table>
    <div class="echarts-wrap" v-else>
        <div class="echarts" v-loading="chartsBoolean">
            <div v-for="(item, index) in lineList" :key="index">
                <lineEcharts
                :id="'lineEcharts' + index"
                :lineData="item"
                ></lineEcharts>
            </div>
        </div>
    </div>
  </div>
</template>

 <script>
import lineEcharts from './lineEcharts'
import {
  sourceCompletion,sourceCompletionTable
} from "@/api/workspace/income";
export default {
  name: "sourceTrend",
  components: {
    lineEcharts
  },
  props: {
    sourceData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chartsBoolean: false,
      lineList: [],
      sysRemark: '01_省计费平台出账',
      tableData: [],
      tableTitle: [],
      tableLoading: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
      init() {
        if (this.sysRemark == '来源表格图') {
            this.getTableData()
            return
        }
        this.chartsBoolean = true
        this.lineList = []
        sourceCompletion({
            acctMonth: this.sourceData.time,
            areaId: this.sourceData.areaId,
            indexCode: this.sourceData.indexCode,
            sysRemark: this.sysRemark,
            remarks: this.sourceData.code,
            flag: this.sourceData.remarks
        }).then(res => {
            if (res.code == 200) {
                let data = res.data;
                let arr = [];
                data.forEach((item) => {
                    let lastData = [];
                    let indata = [];
                    item.data.forEach((its) => {
                        lastData.push(its.indexValue);
                        indata.push(its.thisIndexValue);
                    });
                    let indataArr = []
                    indata.forEach(item => {
                        if (item != undefined &&item != null) {
                            indataArr.push(item)
                        }
                    })
                    let obj = {};
                    obj["title"] = item.name;
                    obj["lastdata"] = lastData;
                    obj["indata"] = indataArr;
                    arr.push(obj);
                });
                this.lineList = arr;
                this.chartsBoolean = false
            }
        })
      },
      getTableData() {
        this.tableLoading = true
        sourceCompletionTable({
            acctMonth: this.sourceData.time,
            areaId: this.sourceData.areaId,
            indexCode: this.sourceData.indexCode,
            sysRemark: this.sysRemark,
            remarks: this.sourceData.code,
            flag: this.sourceData.remarks
        }).then(res => {
            if (res.code == 200) {
                this.tableTitle = res.data.tableTitle
                let arr = res.data.tableData
                arr.map(item => {
                    item.data.map((it,index) => {
                        item['data' + index] = it
                    })
                })
                this.tableData = arr
                this.tableLoading = false
            }
        })
      },
      handleClick(tab) {
        this.sysRemark = tab.name
        this.init()
      },
      source_back() {
        this.$emit('source_back')
      }
  },
};
</script>

 <style lang="scss" scoped>
.sourceTrend {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
    .areaBox {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        position: relative;
        .text {
          font-size: 20px;
        }
        .btns {
          position: absolute;
          right: 0;
        }
    }
    .echarts-wrap {
        padding: 20px 0;
        .btns {
            padding-bottom: 20px;
        }
        .echarts {
            min-height: 500px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            > div {
            width: 33.33%;
            height: 200px;
            }
        }
    }
}
</style>
